<!--
 * @Description: 我的作业
 * @FilePath: /lieshou-app/pages/my/task_rewards.vue
-->

<template>
	<view class="content">
		<!-- 1 -->
		<z-paging ref="paging" safe-area-inset-bottom="true">
			<view slot="top">
				<zNav title="作业奖励" :showBack="true"></zNav>
			</view>
			<!-- 主tab -->
			<zMainTab :active="mainActive" @activeTab="getCurMainActive"></zMainTab>

			<!-- 列表信息 -->
			<view class="card" v-for="(item, index) in dataList" :key="index">
				<!-- top -->
				<view class="title">
					<text class="title-left">{{ item.title }}</text>
				</view>

				<!-- 间隔 -->
				<view class="inter"></view>

				<view class="info">
					<view class="award" v-for="item1 in [0, 1]">
						<image class="before-icon" src="@/static/image/my/prize-icon.png"></image>
						<text class="desc">{{ item.desc }}</text>
						<image class="after-icon" src="@/static/image/my/search-icon.png"></image>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import zNav from '@/components/z-nav.vue'
import zMainTab from './components/z-main-tab.vue'

export default {
	components: {
		zNav,
		zMainTab,
	},
	data() {
		return {
			mainActive: 'tdbx',
			dataList: [
				{
					title: '《100天拓展有效联系人》',
					desc: '1、《100天拓展有效联系人》课件',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 44,
					currentTime: '01:56:00',
					totalTime: '03:15:00',
					status: ['已学完', '已提交作业', '已解锁奖励'],
					canSubmit: false,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...'
				},
				{
					title: '《100天拓展有效联系人》',
					desc: '1、《100天拓展有效联系人》课件',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 100,
					currentTime: '03:15:00',
					totalTime: '03:15:00',
					status: [1, 0, 0],
					canSubmit: true,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...'
				},
				{
					title: '《100天拓展有效联系人》',
					desc: '1、《100天拓展有效联系人》课件',
					chapter: '第一章·第1节 社交软件拓展联系人',
					progress: 100,
					currentTime: '03:15:00',
					totalTime: '03:15:00',
					status: ['已学完', '已提交作业', '已解锁奖励'],
					canSubmit: true,
					question: 'Q：说说你最近在线上软件拓展有效联系人的方法',
					ask: 'A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率A：① 用F5（窗口期）方法，提升到课率，达到了47%的到课率（到课/浏览*100%）具体方法：海报上写特邀xx老师亲授xx，免费讲xx内容，补充信息：有个前提，在私域中一直有建设这个老师的人设，让用户觉得老师的课程干货很多② 用D3（特别关注）方法，提升到课率，达到63%的到课率（到课/触达*100%）,具体方法：API对接AI，把用户的私域标签（需求、偏好）给AI，编写个性化话术群发。③ 用A3（限时升级权益）方法，提升完课率，达到24%完课率...'
				},
			],
		}
	},
	async onLoad() {
		let userInfo = await this.$utils.getStorage('userInfo')
		if (userInfo) {
			this.userInfo = userInfo
			this.$utils.showLog('获取用户信息我的学籍-页面', userInfo)
		}
	},
	methods: {
		getCurMainActive(e) {
			this.mainActive = e.nid
		}
	}
}
</script>

<style lang="scss">
page {
	background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.content {
	width: 100%;
	height: 100%;

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0px 28rpx 20rpx;
		padding: 18rpx 24rpx 16rpx 12rpx;
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);

		&:first-of-type {
			margin-top: 16rpx;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 42rpx;

			&-left {
				font-size: 28rpx;
				color: rgba(43, 43, 43, 1);
			}

			&-right {
				font-size: 20rpx;
				color: rgba(0, 0, 0, 1);
			}
		}

		.info {
			margin-top: 20rpx;
			font-size: 20rpx;
			padding-left: 12rpx;
			color: rgba(43, 43, 43, 1);
			font-size: 20rpx;
			.award {
				display: flex;
				margin-top: 14rpx;
				justify-content: space-between;
				line-height: 34rpx;
				height: 34rpx;
				align-items: center;
				.before-icon {
					width: 34rpx;
					height: 26rpx;
				}
				.after-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.desc {
					flex-grow: 1;
					text-align: left;
					color: rgba(0, 0, 0, 1);
					font-size: 24rpx;
				}
			}
		}

		.inter {
			width: 652rpx;
			height: 2rpx;
			background-color: rgba(235, 235, 235, 1);
			margin: 12rpx auto 16rpx;
		}
	}
}
</style>